<template>
  <div class="header">
    <div class="left">
      <img class="logo" :src="imgUrl">
      <span class="title">{{title}}</span>
    </div>
    <div class="right">
      <span>{{timeStr}}</span>
      <i class="fa fa-sign-out" @click="loginOut"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        imgUrl: require("../../static/img/logo.png"),
        timeStr: "2019年1月01日 12:00:00",
        inter: null,
        title: "",
      }
    },
    computed: {
      systemName() {
        return this.$store.getters.getSystemName;
      }
    },
    watch: {
      systemName(val) {
        this.title = val;
      }
    },
    created() {
      this.inter = setInterval(() => {
        let time = new Date();
        let m = time.getMonth() + 1;
        let t = time.getFullYear() + "年" + m + "月"
          + time.getDate() + "日 " + time.getHours() + ":"
          + (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) + ":" + (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds());
        this.timeStr = t;
      }, 1000);

      this.getConfig();
    },
    beforeDestroy() {
      clearInterval(this.inter);
    },
    methods: {
      getConfig() {
        this.$http.get("/config").then(res => {
          this.systemName = res.systemName;
          this.$store.commit("setSystemName", res.systemName)
        })
      },
      /**退出**/
      loginOut(){
        sessionStorage.clear();
        localStorage.clear();
        this.$router.push('/login');
      }
    }
  }
</script>

<style scoped lang="less">
  .header{
    width: 100%;
    background-image: url("../../static/img/head-bg.png");
    background-repeat: no-repeat;
    height: 94px;
    display: flex;
    padding: 0 15px;
    align-items: center;
    box-sizing: border-box;
    .left{
      width: 50%;
      display: flex;
      align-items: center;
      .logo{
        width: 142px;
        height: 70px;
      }
      .title{
        color: #fff;
        font-size: 36px;
      }
    }
    .right{
      text-align: right;
      width: 50%;
      color: #fff;
      font-size: 20px;
      i{
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
</style>
